<template>
  <div class="content-item">
    <TableModel :table-data="tableData" :is-show-select=false :loading="loading">
      <el-table-column prop="name" label="标段名称"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="workAreaNames" label="工区名称"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="editTender(scope.row.id)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteDevice(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </TableModel>

    <Pagination :pageData="pageData" @pageNum="pageNumData" @pageSize="pageSizeData" />

    <el-dialog :title="deviceTitle" width="500px" :visible.sync="dialogFormVisible">
      <el-form>
        <div class="form-item">
          <span>标段名称：</span>
          <el-input class="form-width" :size="formSize" v-model.trim="name" placeholder="请输入" />
        </div>
        <div class="form-item">
          <span>开始时间：</span>
          <el-date-picker
            v-model="startTime"
            class="form-width"
            :size="formSize"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期" />
        </div>
        <div class="form-item">
          <span>结束时间：</span>
          <el-date-picker
            v-model="endTime"
            class="form-width"
            :size="formSize"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期" />
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../Pagination";
import TableModel from "../../models/TableModel";
import { messageBox } from "../../../util/utils";
import HttpInterface from "../../../util/httpInterface";
import { mapState } from "vuex";

export default {
  name: "TendersInfoModel",
  components: {
    Pagination, TableModel
  },
  data() {
    return {
      loading: false,
      tableData: [],
      deviceTitle: '添加标段信息',
      dialogFormVisible: false,
      pageData: {
        total: 0,
        pageNum: 1,
        pageSize: 20
      },
      formSize: "medium",
      tendId: '0',
      name: '',
      startTime: "",
      endTime: "",
    }
  },

  computed: {
    ...mapState(["workAreaList"])
  },

  methods: {
    show(id) {
      this.dialogFormVisible = true;
      this.deviceTitle = "添加标段信息";
      this.name = "";
      this.tendId = "0";
      this.startTime = "";
      this.endTime = "";
      if (id) {
        this.tendId = id;
        this.deviceTitle = "编辑标段信息";
      }
    },

    // 编辑标段信息
    editTender(id) {
      this.show(id);
      let _this = this;
      var params = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize
      }
      HttpInterface.requestGet(this, HttpInterface.URL_BINDSECTION_FINDPAGE, params, function (res) {
        var { other } = res.data;
        other.rows.forEach(item => {
          if (item.id == id) {
            _this.name = item.name;
            if (item.endTime) {
              _this.endTime = item.endTime.split(" ")[0];
            }
            if (item.startTime) {
              _this.startTime = item.startTime.split(' ')[0];
            }
          }
        })
      }, null)
    },

    // 获取标段信息
    getTendersInfo() {
      let _this = this
      var params = {
        page: this.pageData.pageNum,
        size: this.pageData.pageSize
      }
      HttpInterface.requestGet(this, HttpInterface.URL_BINDSECTION_FINDPAGE, params, function (res) {
        var { total, rows } = res.data.other;
        rows.forEach(item => {
          if (item.endTime) {
            item.endTime = item.endTime.split(" ")[0];
          }
          if (item.startTime) {
            item.startTime = item.startTime.split(' ')[0];
          }
        })
        _this.pageData.total = total;
        _this.tableData = rows;
      }, null)
    },

    verifyFormInfo() {
      let { name, endTime, startTime } = this;
      if (!name) {
        this.warningMessage("请输入标段名称！");
        return false;
      }
      if (!endTime) {
        this.warningMessage("请选择结束时间！");
        return false;
      }
      if (!startTime) {
        this.warningMessage("请选择开始时间！");
        return false;
      }
      return true;
    },

    //添加标段信息
    submitFormInfo() {
      if (!this.verifyFormInfo()) {
        return true;
      }
      let _this = this
      let { name, endTime, startTime } = this;
      var params = { name, endTime, startTime };
      if (this.tendId != 0) {
        params.id = this.tendId
      }
      var url = this.tendId == 0 ? HttpInterface.URL_BINDSECTION_INSERT : HttpInterface.URL_BINDSECTION_UPDATE;
      HttpInterface.requestPost(this, url, params, function (res) {
        let data = res.data;
        if (data.success) {
          _this.dialogFormVisible = false;
          _this.getTendersInfo();
          _this.successMessage("操作成功！");
        } else {
          _this.errorMessage("操作失败！");
        }
      }, null, false)
    },

    //删除设备
    deleteDevice(id) {
      var _this = this;
      messageBox(() => {
        var params = {
          id: id
        }
        HttpInterface.requestGet(this, HttpInterface.URL_BINDSECTION_DELETE, params, function (res) {
          let data = res.data;
          if (data.success) {
            _this.getTendersInfo();
            _this.successMessage("删除成功！");
          } else {
            _this.errorMessage("删除失败！");
          }
        }, null)
      })
    },

    pageNumData(page) {
      this.pageData.pageNum = Number(page);
      this.getTendersInfo()
    },

    pageSizeData(page) {
      this.pageData.pageSize = Number(page);
      this.getTendersInfo()
    }
  }
}
</script>

<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px 0;

  span {
    font-size: 14px;
    margin-right: 10px;
  }

  .form-width {
    width: 230px;
  }
}
</style>
